<template>
  <div class="container">
    <img
      src="https://p6.music.126.net/obj/wo3DlcOGw6DClTvDisK1/9234693144/a48a/3565/ce7b/1980589a4a140c9999ce148179d55c2b.png"
      alt="" />
    <van-button round type="default" style="color: red" size="large" @click="login">手机号登录</van-button>
    <van-button round color="#db2c1f" style="border: 1px white solid" size="large">注册</van-button>
    <van-checkbox v-model="strategy" checked-color="#db2c1f" icon-size="14px" class="strategy">
      <span>同意</span>
      <a class="_1f7Tuvor" href="https://st.music.163.com/official-terms/service" target="_blank">《服务条款》</a>
      <a class="_1f7Tuvor" href="https://st.music.163.com/official-terms/privacy" target="_blank">《隐私政策》</a>
      <a class="_1f7Tuvor" href="https://st.music.163.com/official-terms/children" target="_blank">《儿童隐私政策》</a>
    </van-checkbox>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { Toast } from "vant";
const strategy = ref(false);
const router = useRouter();
const login = () => {
  if (strategy.value) router.push("/phone");
  else {
    Toast("请勾选同意《服务条款》、《隐私政策》、《儿童隐私政策》");
  }
};
</script>

<style scoped lang="less">
.container {
  width: 100%;
  height: 100vh;
  background: #db2c1f;
  padding-top: 100px;

  img {
    display: block;
    margin: 0 auto;
    width: 100px;
    height: 100px;
    margin-bottom: 100px;
  }

  button {
    margin: 0 auto;
    display: block;
  }

  .van-button {
    font-size: 15px;
    width: 70vw;
    height: 50px;
    margin-bottom: 20px;
  }

  .strategy {
    font-size: 12px;
    margin: 30px auto;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;

    span {
      color: hsla(0, 0%, 100%, 0.6);
    }

    a {
      color: white;
    }
  }
}
</style>
